var imgRoIndex=0;//图片对应的索引
var rotation;
function  start() {
    rotation= setInterval(imgRo,4000);
}
start();
var $imgRo= $(".rotation_img li"); // 轮播图片
var  $imgColor=$(".rotation_list li");//轮播小图片
function  imgRo()
{
    $imgRo.css("display","none");
    $imgRo .eq(imgRoIndex).css({"z-index":"7","display":"block"});
    //一轮播图完成后初始化
    if(imgRoIndex+1>5){
        $imgRo .eq(0).css
        (
            {
                "left":"0",
                "z-index":"6",
                "display":"block"
            }
        )
        $imgColor.removeClass("rot_color");
        $imgColor.eq(0).addClass("rot_color");
    }else{
        $imgRo .eq(imgRoIndex+1).css
        (
            {
                "left":"0",
                "z-index":"6",
                "display":"block"
            }
        )

        $imgColor.removeClass("rot_color");
        $imgColor.eq(imgRoIndex+1).addClass("rot_color");
    }
    $imgRo.stop(true,true);
    $imgRo .eq(imgRoIndex).animate
    (   {
            "left":"-670"
        }
        ,500);
    imgRoIndex++;
    if(imgRoIndex>5)
    {
        imgRoIndex=0;
    }
}

//点击小图片进行轮播
var listIndex=0;//点击图片的索引
$imgColor.mousedown(function () {
    clearInterval(rotation);
    listIndex= $(this).index();
    if(listIndex!=imgRoIndex)
    {
        $imgRo.css("display","none");
        $imgRo.eq(listIndex).css
        (
            {
                "left":"0",
                "z-index":"6",
                "display":"block"
            }
        );

        console.log("点击图片"+listIndex);
        $imgRo .eq(imgRoIndex).css({"z-index":"7","display":"block"})
        //如果上一个动画还在进行，就立即结束
        $imgRo .stop();
        $imgRo .eq(imgRoIndex).animate
        (
            {
                "left":"-670"
            }
            ,500);
        $imgColor.removeClass("rot_color");
        $(this).addClass("rot_color");
    }
    imgRoIndex=listIndex;
    start();
});

//点击上下两个箭头进行轮播
$(".prev").mousedown(function () {
        clearInterval(rotation);
        $imgRo.css("display","none");
        if(imgRoIndex-1<0)
        {
            imgRoIndex=6;
            $imgRo.eq(5).css
            (
                {
                    "left":"0",
                    "z-index":"6",
                    "display":"block"
                }
            );
            //如果上一个动画还在进行，就立即结束
            $imgRo .eq(0).css({"z-index":"7","display":"block"})
            $imgRo .stop();
            $imgRo .eq(0).animate
            (
                {
                    "left":"-670"
                }
                ,500);
        }else
        {
            $imgRo.eq(imgRoIndex-1).css
            (
                {
                    "left":"0",
                    "z-index":"6",
                    "display":"block"
                }
            );
            //如果上一个动画还在进行，就立即结束
            $imgRo .stop();
            $imgRo .eq(imgRoIndex).animate
            (
                {
                    "left":"-670"
                }
                ,500);
        }
        $imgRo .eq(imgRoIndex).css({"z-index":"7","display":"block"})

        $imgColor.removeClass("rot_color");

        $imgColor.eq(imgRoIndex-1).addClass("rot_color");
        imgRoIndex=  imgRoIndex-1;
        start();
    }
)
$(".next").mousedown(function () {
        clearInterval(rotation);
        $imgRo.css("display","none");
        $imgRo .eq(imgRoIndex).css({"z-index":"7","display":"block"})
        //如果上一个动画还在进行，就立即结束
        $imgRo .stop();
        $imgRo .eq(imgRoIndex).animate
        (
            {
                "left":"-670"
            }
            ,500);
        $imgColor.removeClass("rot_color");
        if(imgRoIndex+1>5)
        {
            imgRoIndex=0;
            $imgColor.eq(0).addClass("rot_color");
            $imgRo.eq(0).css
            (
                {
                    "left":"0",
                    "z-index":"6",
                    "display":"block"
                }
            );
        }else
        {
            $imgRo.eq(imgRoIndex+1).css
            (
                {
                    "left":"0",
                    "z-index":"6",
                    "display":"block"
                }
            );
            $imgColor.eq(imgRoIndex+1).addClass("rot_color");
            imgRoIndex=  imgRoIndex+1
        }
        start();
    }
)